<template>
  <view class="depot-card" @click="$emit('click')">
    <image :src="depot.image" class="depot-img"></image>
    <view class="depot-info">
      <view class="depot-header">
        <text class="depot-name">{{depot.name}}</text>
        <view class="rating">
          <uni-icons type="star-filled" size="14" color="#FFD700"></uni-icons>
          <text>{{depot.rating}} ({{depot.reviews}})</text>
        </view>
      </view>
      <view class="depot-location">
        <uni-icons type="location" size="14" color="#999"></uni-icons>
        <text>{{depot.distance}} | {{depot.address}}</text>
      </view>
      <view class="depot-price">
        <text class="price">¥{{depot.price}}<text class="unit">/小时起</text></text>
        <view class="tags">
          <view class="tag orange-tag">{{depot.size}}箱型</view>
          <view v-if="depot.delivery" class="tag green-tag">免费取送</view>
        </view>
      </view>
      <view class="depot-meta">
        <text class="meta-item">营业中 {{depot.hours}}</text>
        <text class="meta-item">空闲 {{depot.available}}个</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    depot: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;
$light-orange: #FFF5EB;
$dark-orange: #E67300;

.depot-card {
  display: flex;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  
  .depot-img {
    width: 120px;
    height: 120px;
  }
  
  .depot-info {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .depot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
  }
  
  .depot-name {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    flex: 1;
    margin-right: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .rating {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #FF9800;
    white-space: nowrap;
    
    text {
      margin-left: 3px;
    }
  }
  
  .depot-location {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    
    text {
      margin-left: 3px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  
  .depot-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    
    .price {
      color: $primary-color;
      font-size: 18px;
      font-weight: bold;
      
      .unit {
        font-size: 12px;
        font-weight: normal;
        margin-left: 3px;
      }
    }
    
    .tags {
      display: flex;
    }
    
    .tag {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    
    .orange-tag {
      background-color: $light-orange;
      color: $dark-orange;
    }
    
    .green-tag {
      background-color: #E8F5E9;
      color: #4CAF50;
    }
  }
  
  .depot-meta {
    display: flex;
    font-size: 12px;
    color: #666;
    
    .meta-item {
      margin-right: 15px;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #ddd;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }
}
</style>